<template>
  <!--积分体系设置-->
  <KiFormDialog
    :show.sync="dialogVisible"
    title="积分体系"
    v-model="row__.data"
    :submit="submit"
    :before-close="
      () => {
        $emit('update:show', false)
      }
    "
  >
    <template #el-form>
      <div>
        <!-- 充值与 -->
        消费
      </div>
      <el-form-item label="消费金额" verify>
        <el-row>
          <el-col class="line" :span="2">每消费</el-col>
          <el-col :span="9">
            <el-form-item prop="consumeAmount" verify>
              <el-input-number v-model.number="row__.data.consumeAmount" :placeholder="placeholder" :min="1" :max="99999" :precision="0" />
            </el-form-item>
          </el-col>
          <el-col class="line" :span="3" style="text-align: center">元时，积</el-col>
          <el-col :span="9">
            <el-form-item prop="consumePoint" verify>
              <el-input-number v-model.number="row__.data.consumePoint" :placeholder="placeholder" :min="1" :max="99999" :precision="0" />
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1" style="text-align: end">分</el-col>
        </el-row>
      </el-form-item>
      <!-- <el-form-item label="充值金额" verify>
        <el-row>
          <el-col class="line" :span="2">每充值</el-col>
          <el-col :span="9">
            <el-form-item prop="rechargeAmount" verify>
              <el-input-number v-model.number="row__.data.rechargeAmount" :placeholder="placeholder" :min="1" :max="99999" :precision="0" />
            </el-form-item>
          </el-col>
          <el-col class="line" :span="3" style="text-align: center">元时，积</el-col>
          <el-col :span="9">
            <el-form-item prop="rechargePoint" verify>
              <el-input-number v-model.number="row__.data.rechargePoint" :placeholder="placeholder" :min="1" :max="99999" :precision="0" />
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1" style="text-align: end">分</el-col>
        </el-row>
      </el-form-item> -->

      <div>任务奖励</div>
      <el-form-item label="登录">
        <el-form-item
          v-for="(domain, index) in row__.data.login"
          :key="domain.key"
          :prop="'login.' + index + '.point'"
          :show-message="false"
          :required="row__.data.loginCheckList.includes(index)"
          style="margin: 0 0 18px 20px"
        >
          <el-row type="flex" align="middle">
            <el-col :span="2">
              <el-checkbox :label="index" v-model="row__.data.loginCheckList" @change="checkboxChange('login', index)">{{ trans[domain.type] }}</el-checkbox>
            </el-col>
            <el-col :span="9">
              <el-input-number
                v-model.number="domain.point"
                :disabled="!row__.data.loginCheckList.includes(index)"
                style="width:unset;"
                :placeholder="placeholder"
                :min="1"
                :max="99999"
                :precision="0"
              />
            </el-col>
            <el-col :span="10">
              <span style="vertical-algin: middle">分</span>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form-item>
      <el-form-item label="分享">
        <el-form-item
          :ref="`domain${index}`"
          v-for="(domain, index) in row__.data.share"
          :key="domain.key"
          :prop="'share.' + index + '.point'"
          :show-message="false"
          :required="row__.data.shareCheckList.includes(index)"
          style="margin: 0 0 18px 20px"
        >
          <el-row type="flex" align="middle">
            <el-col :span="2">
              <el-checkbox :label="index" v-model="row__.data.shareCheckList" @change="checkboxChange('share', index)">{{ trans[domain.type] }}</el-checkbox>
            </el-col>
            <el-col :span="9">
              <el-input-number
                v-model.number="domain.point"
                :disabled="!row__.data.shareCheckList.includes(index)"
                style="width:unset;"
                clearable
                :placeholder="placeholder"
                :min="1"
                :max="99999"
                :precision="0"
              />
            </el-col>
            <el-col :span="10">
              <span style="vertical-algin: middle;">分</span>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form-item>
      <div>规则说明</div>
      <el-form-item label="富文本" prop="rule" verify>
        <MiniMCE v-model="row__.data.rule" />
      </el-form-item>
    </template>
  </KiFormDialog>
</template>

<script>
export default {
  props: {
    show: Boolean
  },
  data() {
    return {
      dialogVisible: false,
      // 积分体系表单信息
      row__: {
        show: false,
        data: {
          login: [
            { point: undefined, type: 0 },
            { point: undefined, type: 1 }
          ],
          share: [
            { point: undefined, type: 0 },
            { point: undefined, type: 1 }
          ],
          loginCheckList: [],
          shareCheckList: []
        },
        loading: false
      },
      trans: {
        0: '每日',
        1: '首次'
      },
      placeholder: '输入大于0的数'
    }
  },
  watch: {
    show(newVal) {
      this.dialogVisible = newVal
      if (newVal) {
        this.$POST('sot-admin-api/vip/vip-integral-rule/queryOne').then(_ => {
          let info = _.data
          info.consumeAmount = this.$operation(info.consumeAmount, '/')
          info.rechargeAmount = this.$operation(info.rechargeAmount, '/')
          info.loginCheckList = info.login.map(_ => {
            return _.type
          })
          info.shareCheckList = info.share.map(_ => {
            return _.type
          })
          info.login = [info.login[0] || this.row__.data.login[0], info.login[1] || this.row__.data.login[1]]
          info.share = [info.share[0] || this.row__.data.share[0], info.share[1] || this.row__.data.share[1]]
          this.row__.data = { ...info }
        })
      }
    }
  },
  methods: {
    submit() {
      this.$emit('update:show', false)
      this.row__.data.consumeAmount = this.$operation(this.row__.data.consumeAmount, '*')
      this.row__.data.rechargeAmount = this.$operation(this.row__.data.rechargeAmount, '*')
      return this.$POST('sot-admin-api/vip/vip-integral-rule/createOrUpdate', this.row__.data)
    },
    checkboxChange(validName, i) {
      if (!this.row__.data[validName + 'CheckList'].includes(i)) {
        this.row__.data[validName][i].point = undefined
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__suffix-inner {
  line-height: 36px;
  padding: 0 4px;
}
.flex {
  display: flex;
}
.col-center {
  align-items: center;
}
.row-center {
  justify-content: center;
}
</style>
